import React, {
    useState,
    useEffect
} from "react"
import { useObserver } from "mobx-react-lite"
import { useHistory } from "react-router-dom"
import "./search.scss"
import useStore from "../context/useStore"
const Search: React.FC = () => {
    let { search } = useStore();
    let [searchText, setSearchText] = useState<string>('');
    let [flag, setFlag] = useState<boolean>(false)
    let history = useHistory()
    useEffect(() => {
        search.getHotList();
    }, [search])
    useEffect(() => {
        search.getHistoryList();
    }, [search])
    useEffect(() => {
        let arr=JSON.parse(localStorage.getItem("search_history")) 
        if (arr) {
          setFlag(true)
        } else {
          setFlag(false)
        }
      },[])
    useEffect(() => {
        // 获取搜索关键词提示
        search.getSearchTips(searchText)
        search.getSearchResult(searchText)
        
    }, [search, searchText])
    function getSearchResult() {
        history.push('/detail')
        let arr = JSON.parse(localStorage.getItem("search_history")) || [];
        arr.push(searchText)
        localStorage.setItem("search_history", JSON.stringify(arr))
    }
    function del() {
        search.clearHistoryList()
        search.getHistoryList();
        setFlag(false)
    }
    return useObserver(() =>
        <div className="serach">
            {/* 搜索框 */}
            <section className="ipts">
                <div>
                    <input type="text" placeholder="搜索你喜欢的内容" value={searchText} onChange={e => setSearchText(e.target.value)} />
                    <button onClick={getSearchResult}>搜索</button>
                </div>
            </section>
            <section className="body">
                {
                    flag&&<div className="div1">
                    <section className="SearchHistory">
                        <p>
                            <span>历史搜索</span>
                            <span onClick={del}><span><svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1122" width="20" height="20"><path d="M574.577778 739.555556V381.155556c0-39.822222 62.577778-39.822222 62.577778 0V739.555556c5.688889 39.822222-62.577778 39.822222-62.577778 0z m-193.422222 0V381.155556c0-39.822222 62.577778-39.822222 62.577777 0V739.555556c5.688889 39.822222-62.577778 39.822222-62.577777 0z m551.822222-517.688889h-164.977778V159.288889c0-51.2-45.511111-96.711111-96.711111-96.711111H347.022222c-28.444444 0-51.2 11.377778-68.266666 28.444444-17.066667 17.066667-28.444444 45.511111-28.444445 68.266667v62.577778H85.333333C45.511111 221.866667 45.511111 284.444444 85.333333 284.444444h847.644445c45.511111 0 45.511111-62.577778 0-62.577777zM318.577778 153.6c0-17.066667 17.066667-34.133333 34.133333-34.133333h324.266667c17.066667 0 34.133333 11.377778 34.133333 34.133333v62.577778H318.577778V153.6zM739.555556 967.111111H284.444444c-28.444444 0-51.2-11.377778-68.266666-28.444444-17.066667-17.066667-28.444444-45.511111-28.444445-68.266667V381.155556c0-17.066667 17.066667-34.133333 34.133334-34.133334s34.133333 11.377778 34.133333 34.133334v489.244444c0 17.066667 17.066667 34.133333 34.133333 34.133333h455.111111c17.066667 0 34.133333-17.066667 34.133334-34.133333V386.844444c0-39.822222 62.577778-39.822222 62.577778 0v489.244445c-5.688889 45.511111-45.511111 91.022222-102.4 91.022222z" fill="#999999" p-id="1123"></path></svg></span></span>
                        </p>
                    </section>
                    <section className="searchTips">
                        {
                            search.searchTipList&&search.searchTipList.map((item,index) => {
                                return <p key={index}>{item}</p>
                            })
                        }
                    </section>
                    {/* 历史搜索 */}
                    <section>
                        {
                            search.historyList&&search.historyList.map((item,index) => {
                                return <p key={index}><span>{item}</span></p>
                            })
                        }
                    </section>
                </div>
                }
                <div className="div2">
                    {/* 热门推荐 */}
                    <section>
                        <p>热门搜索</p>
                        <div>{search.hotList.map((item, index) => {
                            return <span key={item}>{index + 1}、{item}</span>
                        })}</div>
                    </section>
                </div>
            </section>


        </div>)
}

export default Search